<template>
  <div class="ins">
    <div class="ins_top">
      <div class="query">
        <div class="blocks">
          <div class="demo-date-picker">
            <div class="date">入库时间</div>
          </div>
        </div>
      </div>
      <div class="cards">
        <el-table
          ref="multipleTableRef"
          :data="tableData"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="num" label="业务单号" width="180">
            <!-- <template #default="scope">{{ scope.row.date }}</template> -->
          </el-table-column>
          <el-table-column prop="master" label="客户名" />
          <el-table-column prop="tray" label="单据状态" />
          <el-table-column prop="date" label="业务时间" width="180" />
          <el-table-column prop="store" label="仓库" />
          <el-table-column prop="remarks" label="备注" />
        </el-table>
        <div class="history">
          <div class="refresh"><el-button type="info">刷新列表</el-button></div>
          <div class="start"><el-button type="info">开始验货</el-button></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import type { ElTable } from "element-plus";
interface User {
  date: string;
  name: string;
  address: string;
}
const input = ref("");
const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const multipleSelection = ref<User[]>([]);
const toggleSelection = (rows?: User[]) => {
  if (rows) {
    rows.forEach((row) => {
      // TODO: improvement typing when refactor table
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      multipleTableRef.value!.toggleRowSelection(row, undefined);
    });
  } else {
    multipleTableRef.value!.clearSelection();
  }
};
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val;
};
const tableData = [
  {
    num: "00002",
    master: "小华",
    tray: "入库办理",
    name: "导弹",
    store: "",
    remarks: "",
    date: "2018-11-03 23:40:33",
  },
];
//时间
const value1 = ref("");
const value2 = ref("");

const shortcuts = [
  {
    text: "Today",
    value: new Date(),
  },
  {
    text: "Yesterday",
    value: () => {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24);
      return date;
    },
  },
  {
    text: "A week ago",
    value: () => {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
      return date;
    },
  },
];

const disabledDate = (time: Date) => {
  return time.getTime() > Date.now();
};
</script>

<style scoped>
.cards {
  border: 1px solid lightgrey;
}

.history {
  display: flex;
  justify-content: flex-end;
  padding: 5px 0;
}
.start {
  margin: 0 65px 0 100px;
}
.demo-date-picker {
  display: flex;
  flex-direction: row;
  width: 33%;
  padding: 0;
  flex-wrap: wrap;
}

.demo-date-picker .block {
  padding: 10px 0;
  text-align: center;
  /* border-right: solid 1px var(--el-border-color); */
  flex: 1;
}

.demo-date-picker .block:last-child {
  border-right: none;
}

.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

.blocks {
  display: flex;
  width: 100%;
  color: #333333;
  font-size: 14px;
  align-items: center;
  background-color: #f7f7f7;
}

.date {
  padding: 10px 20px;
  display: flex;
  align-items: center;
  color: #2e6095;
}
.card {
  margin-right: 20px;
}
.master {
  margin: 0 20px;
}
.button {
  margin-left: 20px;
}
.message_inps {
  display: flex;
  padding: 3px 24px;
  color: #666666;
  font-size: 14px;
  border-bottom: 1px solid lightgrey;
}
.message_inps_text {
  width: 164px;
  display: flex;
  align-items: center;
}
.in {
  width: 223.6px;
}
.title {
  color: #2e6095;
  font-size: 14px;
  padding: 10px 0 10px 25px;
  background-color: #f7f7f7;
}
.query_text {
  color: #333333;
  font-size: 14px;
  padding: 10px 0 10px 25px;
}
.ins_top {
  border: 1px solid lightgrey;
  margin-bottom: 10px;
}
.message {
  margin-top: 10px;
  border: 1px solid lightgrey;
  background-color: #f7f7f7;
}
</style>
